<template>
  <div id="index_container">
    <div id="search_warp">
      <Search></Search>
    </div>
    <div id="map_warp">
      <MapContainer></MapContainer>
    </div>
  </div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer.vue";
import Search from "@/components/Search/index.vue";

export default {
  components: {
    MapContainer,
    Search
  }
}
</script>
<style scoped lang="less">
#index_container {
  padding: 0px;
  margin: 0px;
  position: relative;
  width: 100%;
  height: 100%;

  #search_warp {
    position: absolute;
    top: 10%;
    left: 40%;
    height: 60px;
    width: 400px;
   }

  #map_warp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
  }
}
</style>